<template>
    <div class="parent">
        <div class="selectParent">
            <p class="select" @click="choiceSelect">
                <span class="text">{{placeholder}}</span>
                <span class="icon" v-show="iconHide"></span>
                <span class="iconShow" v-show="iconShow"></span>
            </p>
            <ul class="list" v-show="flag">
                <li class="listItem" @click="choiceVal(item.mc, item.dm)" v-for="(item, index) in datalist" :key="index" ref="one">{{item.mc}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Select',
    data () {
        return {
            placeholder: '请选择',
            datalist: [],
            ind: null,
            flag: false,
            iconHide: true,
            iconShow: false
        }
    },
    created () {
        this.datalist = JSON.parse(JSON.parse(sessionStorage.getItem('userInfo')).extraData)['0503'].child
    },
    methods: {
        choiceSelect () {
            if (!this.flag) {
                this.iconHide = false
                this.iconShow = true
                this.flag = true
            } else {
                this.iconHide = true
                this.iconShow = false
                this.flag = false
            }
        },
        choiceVal (mc, dm) {
            this.iconHide = true
            this.iconShow = false
            this.flag = false
            this.placeholder = mc
            this.ind = dm
            this.$emit('accidentEvent', {
                placeholder: this.placeholder,
                dm: this.ind
            })
        }
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
    // height: 2.293333rem;
    height: 2rem;
    // padding: 0 0.1rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
}
.selectParent{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 .533333rem;
    position: relative;
    .select{
        width: 100%;
        height: 1.2rem;
        border-radius: .106667rem;
        background: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 .2rem;
        .text{
            font-size:14px;
            font-family:ArialMT;
            color:rgba(82,82,82,1);
            letter-spacing:1px;
        }
        .icon{
            display: block;
            width: 0;
            height: 0;
            border: 7px solid transparent;
            border-bottom: 7px solid #000;
            margin-top: -0.12rem;
        }
        .iconShow{
            display: block;
            width: 0;
            height: 0;
            border: 7px solid transparent;
            border-top: 7px solid #000;
            margin-top: 0.28rem;
        }
    }
    .list{
        position: absolute;
        top: 1.68rem;
        z-index: 2;
        width: 100%;
        border-radius: 0.03rem;
        padding: 0 .533333rem;
        .listItem{
            width: 100%;
            height: 1.066667rem;
            padding: 0 .2rem;
            font-size:14px;
            font-family:ArialMT;
            color:rgba(82,82,82,1);
            letter-spacing:1px;
            background: #fff;
            border-left: 1px solid #eee;
            border-right: 1px solid #eee;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            position: relative;
        }
        .listItem:first-child{
            border-top: 1px solid #eee;
        }
        .listItem:hover{
            color: #fff;
            background: linear-gradient(135deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
        }
        .listItem:after{
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: #cccccc;
            width: 100%;
            height: 1px;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
        }
    }
}

</style>
